<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="第二课堂素质拓展学分评定系统 - 学分警告详情">
    <title>学分警告详情 - 第二课堂素质拓展学分评定系统</title>
    
    <!-- 资源优化 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    
    <!-- 内联关键CSS -->
    <style>
        :root {
            --primary-color: #3b82f6;
            --danger-color: #ef4444;
            --warning-color: #f59e0b;
            --success-color: #10b981;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-500: #6b7280;
            --gray-700: #374151;
            --gray-900: #111827;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: var(--gray-100);
            color: var(--gray-900);
            line-height: 1.5;
        }
        
        .card {
            background: white;
            border-radius: 0.5rem;
            border: 1px solid var(--gray-200);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 500;
        }
        
        .badge-danger {
            background-color: #fee2e2;
            color: #b91c1c;
        }
        
        .badge-warning {
            background-color: #fef3c7;
            color: #92400e;
        }
        
        .badge-success {
            background-color: #d1fae5;
            color: #065f46;
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #2563eb;
        }
        
        .btn-secondary {
            background-color: var(--gray-100);
            color: var(--gray-700);
        }
        
        .btn-secondary:hover {
            background-color: var(--gray-200);
        }
        
        .sidebar {
            width: 16rem;
            background-color: white;
            border-right: 1px solid var(--gray-200);
            flex-shrink: 0;
        }
        
        @media (max-width: 768px) {
            .sidebar {
                display: none;
            }
            .flex-col-mobile {
                flex-direction: column;
            }
            .space-y-mobile > * + * {
                margin-top: 1rem;
            }
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <!-- 头部导航 -->
    <header class="h-16 bg-white border-b border-gray-200 px-6 flex items-center justify-between shadow-sm">
        <div class="flex items-center space-x-4">
            <img src="images/log.svg" alt="logo" class="h-12 w-12">
            <span class="text-xl font-semibold text-gray-900">第二课堂素质拓展学分评定系统</span>
        </div>
        
        <div class="flex items-center space-x-4">
            <div class="flex items-center text-gray-600">
                <i class="fas fa-user-circle text-xl mr-2" aria-hidden="true"></i>
                <span id="adminInfo">管理员：张明德</span>
            </div>
            <button class="btn btn-secondary" aria-label="退出登录">
                <i class="fas fa-sign-out-alt mr-2" aria-hidden="true"></i>
                退出登录
            </button>
        </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <nav class="py-4">
                <div class="px-4 py-2">
                    <div class="text-gray-500 text-sm font-medium mb-2">主要功能</div>
                    <div class="space-y-1">
                        <a href="student-management.html" class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">
                            <i class="fas fa-users w-5 h-5 flex items-center justify-center" aria-hidden="true"></i>
                            <span class="ml-3">学生管理</span>
                        </a>
                        <a href="data-management.html" class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">
                            <i class="fas fa-database w-5 h-5 flex items-center justify-center" aria-hidden="true"></i>
                            <span class="ml-3">数据管理</span>
                        </a>
                        <a href="statistics-analysis.html" class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">
                            <i class="fas fa-chart-bar w-5 h-5 flex items-center justify-center" aria-hidden="true"></i>
                            <span class="ml-3">统计分析</span>
                        </a>
                        <a href="credit-warning.html" class="flex items-center px-4 py-2 text-blue-600 bg-blue-50 rounded">
                            <i class="fas fa-exclamation-triangle w-5 h-5 flex items-center justify-center" aria-hidden="true"></i>
                            <span class="ml-3">学分警示</span>
                        </a>
                    </div>
                </div>
            </nav>
        </aside>
        
        <!-- 主内容区域 -->
        <main class="flex-1 overflow-auto p-4 md:p-6">
            <div class="container mx-auto">
                <!-- 页面标题和返回按钮 -->
                <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6 space-y-4 md:space-y-0">
                    <div>
                        <h1 class="text-2xl font-semibold">学分警告详情</h1>
                        <p class="text-gray-500">查看学生学分警告详细信息及干预建议</p>
                    </div>
                    <a href="credit-warning.html" class="btn btn-secondary self-start md:self-auto">
                        <i class="fas fa-arrow-left mr-2" aria-hidden="true"></i>返回列表
                    </a>
                </div>

                <!-- 学生基本信息卡片 -->
                <section class="card mb-6" aria-labelledby="student-info-heading">
                    <div class="p-6">
                        <div class="flex flex-col md:flex-row md:items-center">
                            <div class="flex-shrink-0 mb-4 md:mb-0">
                                <div class="w-24 h-24 bg-gray-200 rounded-full flex items-center justify-center overflow-hidden" aria-hidden="true">
                                    <i class="fas fa-user text-4xl text-gray-400"></i>
                                </div>
                            </div>
                            <div class="md:ml-8 flex-1">
                                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                                    <div>
                                        <h2 id="student-info-heading" class="text-xl font-semibold">孙雪莲</h2>
                                        <p class="text-gray-500">2020101004 | 信息安全 | 计算机学院</p>
                                    </div>
                                    <div class="mt-4 md:mt-0">
                                        <span class="badge badge-danger">严重警告</span>
                                    </div>
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
                                    <div>
                                        <p class="text-sm text-gray-500">已获学分</p>
                                        <p class="text-lg font-semibold">2.5</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-500">预警时间</p>
                                        <p class="text-lg font-semibold">2024-01-15</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-500">处理状态</p>
                                        <p id="processStatus" class="text-lg font-semibold text-yellow-600">待处理</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 学分情况分析 -->
                <section class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6" aria-label="学分情况分析">
                    <div class="card">
                        <div class="p-6">
                            <h2 class="text-lg font-semibold mb-4">学分获取趋势</h2>
                            <div id="creditTrend" style="width: 100%; height: 300px;" role="img" aria-label="学分获取趋势图表"></div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="p-6">
                            <h2 class="text-lg font-semibold mb-4">学分构成分析</h2>
                            <div id="creditComposition" style="width: 100%; height: 300px;" role="img" aria-label="学分构成分析图表"></div>
                        </div>
                    </div>
                </section>

                <!-- 预警原因及干预建议 -->
                <section class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6" aria-label="预警分析与建议">
                    <div class="card">
                        <div class="p-6">
                            <h2 class="text-lg font-semibold mb-4">预警原因分析</h2>
                            <ul class="space-y-3">
                                <li class="flex items-start">
                                    <i class="fas fa-times-circle text-red-500 mt-1 mr-3" aria-hidden="true"></i>
                                    <span>参与第二课堂活动次数不足，仅参加了3次活动</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-times-circle text-red-500 mt-1 mr-3" aria-hidden="true"></i>
                                    <span>社会实践类学分未达标，仅获得0.5学分</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-times-circle text-red-500 mt-1 mr-3" aria-hidden="true"></i>
                                    <span>学术科技类活动参与度低，未获得相关学分</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-times-circle text-red-500 mt-1 mr-3" aria-hidden="true"></i>
                                    <span>连续两个学期学分增长缓慢</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card">
                        <div class="p-6">
                            <h2 class="text-lg font-semibold mb-4">干预建议</h2>
                            <ul class="space-y-3">
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-3" aria-hidden="true"></i>
                                    <span>建议参加即将开展的社会实践活动，可获得2学分</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-3" aria-hidden="true"></i>
                                    <span>推荐选修《创新创业基础》课程，可获得1.5学分</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-3" aria-hidden="true"></i>
                                    <span>建议加入学术科技类社团，参与相关竞赛</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-3" aria-hidden="true"></i>
                                    <span>安排辅导员一对一学业指导，制定学分提升计划</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </section>

                <!-- 活动参与记录 -->
                <section class="card mb-6" aria-labelledby="activity-records-heading">
                    <div class="p-6">
                        <h2 id="activity-records-heading" class="text-lg font-semibold mb-4">活动参与记录</h2>
                        <div class="overflow-x-auto">
                            <table class="w-full" aria-describedby="activity-records-heading">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">活动名称</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">活动类型</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">参与时间</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">获得学分</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">活动状态</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">新生入学教育</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">思想引领</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">2020-09-15</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">1.0</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="badge badge-success">已完成</span>
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">志愿服务活动</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">志愿服务</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">2021-03-20</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">0.5</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="badge badge-success">已完成</span>
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">心理健康讲座</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">身心健康</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">2021-11-10</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">1.0</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="badge badge-success">已完成</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </section>

                <!-- 操作记录 -->
                <section class="card" aria-labelledby="operation-records-heading">
                    <div class="p-6">
                        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
                            <h2 id="operation-records-heading" class="text-lg font-semibold">操作记录</h2>
                            <button id="sendNotificationBtn" class="btn btn-primary mt-4 md:mt-0">
                                <i class="fas fa-envelope mr-2" aria-hidden="true"></i>发送提醒通知
                            </button>
                        </div>
                        <div id="operationRecords" class="space-y-4">
                            <div class="border-l-4 border-red-500 pl-4 py-2">
                                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                                    <p class="font-medium">系统自动生成严重警告</p>
                                    <p class="text-sm text-gray-500 mt-1 md:mt-0">2024-01-15 09:30</p>
                                </div>
                                <p class="text-sm text-gray-600 mt-1">学生当前学分2.5，低于学校要求的4.0学分标准，系统自动生成严重警告。</p>
                            </div>
                            <div class="border-l-4 border-blue-500 pl-4 py-2">
                                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                                    <p class="font-medium">发送警告通知</p>
                                    <p class="text-sm text-gray-500 mt-1 md:mt-0">2024-01-15 10:15</p>
                                </div>
                                <p class="text-sm text-gray-600 mt-1">系统已向学生发送学分警告通知邮件和短信。</p>
                                <p class="text-sm text-gray-500 mt-2">操作人：张明德</p>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>

    <!-- JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取学生ID
            const urlParams = new URLSearchParams(window.location.search);
            const studentId = urlParams.get('id') || '2020101004';
            
            // 模拟学生数据
            const studentData = {
                '2020101004': {
                    name: '孙雪莲',
                    department: '计算机学院',
                    major: '信息安全',
                    credits: 2.5,
                    warningLevel: 'danger',
                    lastNotify: '2024-01-15',
                    activities: [
                        { name: '新生入学教育', type: '思想引领', date: '2020-09-15', credit: 1.0, status: '已完成' },
                        { name: '志愿服务活动', type: '志愿服务', date: '2021-03-20', credit: 0.5, status: '已完成' },
                        { name: '心理健康讲座', type: '身心健康', date: '2021-11-10', credit: 1.0, status: '已完成' }
                    ],
                    operations: [
                        { type: 'warning', action: '系统自动生成严重警告', time: '2024-01-15 09:30', 
                          detail: '学生当前学分2.5，低于学校要求的4.0学分标准，系统自动生成严重警告。', operator: '系统' },
                        { type: 'notify', action: '发送警告通知', time: '2024-01-15 10:15', 
                          detail: '系统已向学生发送学分警告通知邮件和短信。', operator: '张明德' }
                    ]
                }
            };

            // 加载学生数据
            const student = studentData[studentId];
            if (student) {
                document.getElementById('student-info-heading').textContent = student.name;
                document.querySelector('.text-gray-500').textContent = 
                    `${studentId} | ${student.major} | ${student.department}`;
                document.querySelector('.text-lg.font-semibold').textContent = student.credits;
                
                // 渲染活动记录
                const activityTable = document.querySelector('tbody');
                activityTable.innerHTML = student.activities.map(activity => `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm">${activity.name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">${activity.type}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">${activity.date}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">${activity.credit}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="badge badge-success">${activity.status}</span>
                        </td>
                    </tr>
                `).join('');
                
                // 渲染操作记录
                const operationRecords = document.getElementById('operationRecords');
                operationRecords.innerHTML = student.operations.map(record => `
                    <div class="border-l-4 ${record.type === 'warning' ? 'border-red-500' : 'border-blue-500'} pl-4 py-2">
                        <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                            <p class="font-medium">${record.action}</p>
                            <p class="text-sm text-gray-500 mt-1 md:mt-0">${record.time}</p>
                        </div>
                        <p class="text-sm text-gray-600 mt-1">${record.detail}</p>
                        <p class="text-sm text-gray-500 mt-2">操作人：${record.operator}</p>
                    </div>
                `).join('');
            }

            // 发送通知按钮事件
            document.getElementById('sendNotificationBtn').addEventListener('click', function() {
                const studentName = document.getElementById('student-info-heading').textContent;
                alert(`已向学生 ${studentName} 发送提醒通知`);
                
                // 添加新的操作记录
                const newRecord = document.createElement('div');
                newRecord.className = 'border-l-4 border-green-500 pl-4 py-2';
                newRecord.innerHTML = `
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                        <p class="font-medium">发送提醒通知</p>
                        <p class="text-sm text-gray-500 mt-1 md:mt-0">${new Date().toLocaleString()}</p>
                    </div>
                    <p class="text-sm text-gray-600 mt-1">已向学生 ${studentName} 发送学分提醒通知。</p>
                    <p class="text-sm text-gray-500 mt-2">操作人：张明德</p>
                `;
                document.getElementById('operationRecords').appendChild(newRecord);
            });

            // 标记处理功能
            function markAsProcessed() {
                document.getElementById('processStatus').textContent = '已处理';
                document.getElementById('processStatus').className = 'text-lg font-semibold text-green-600';
                
                // 添加操作记录
                const newRecord = document.createElement('div');
                newRecord.className = 'border-l-4 border-green-500 pl-4 py-2';
                newRecord.innerHTML = `
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                        <p class="font-medium">标记为已处理</p>
                        <p class="text-sm text-gray-500 mt-1 md:mt-0">${new Date().toLocaleString()}</p>
                    </div>
                    <p class="text-sm text-gray-600 mt-1">已将学生 ${document.getElementById('student-info-heading').textContent} 的警告标记为已处理。</p>
                    <p class="text-sm text-gray-500 mt-2">操作人：张明德</p>
                `;
                document.getElementById('operationRecords').appendChild(newRecord);
            }

            // 初始化图表
            function initCharts() {
                // 学分趋势图表
                const creditTrendChart = echarts.init(document.getElementById('creditTrend'));
                creditTrendChart.setOption({
                    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
                    xAxis: {
                        type: 'category',
                        data: ['大一上', '大一下', '大二上', '大二下', '大三上']
                    },
                    yAxis: { type: 'value', name: '学分' },
                    series: [
                        {
                            data: [1.0, 0.5, 0, 0, 1.0],
                            type: 'bar',
                            name: '获得学分',
                            itemStyle: { color: '#3b82f6' }
                        },
                        {
                            data: [2.0, 2.0, 2.0, 2.0, 2.0],
                            type: 'line',
                            name: '目标学分',
                            lineStyle: { type: 'dashed', color: '#ef4444' },
                            symbol: 'circle'
                        }
                    ],
                    legend: { data: ['获得学分', '目标学分'], bottom: 0 }
                });

                // 学分构成图表
                const creditCompositionChart = echarts.init(document.getElementById('creditComposition'));
                creditCompositionChart.setOption({
                    tooltip: { trigger: 'item' },
                    legend: { orient: 'vertical', left: 10, bottom: 0 },
                    series: [{
                        name: '学分构成',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
                        label: { show: false, position: 'center' },
                        emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
                        labelLine: { show: false },
                        data: [
                            { value: 1.0, name: '思想引领' },
                            { value: 0.5, name: '志愿服务' },
                            { value: 1.0, name: '身心健康' },
                            { value: 0, name: '学术科技' },
                            { value: 0, name: '文化艺术' },
                            { value: 0, name: '社会实践' }
                        ]
                    }]
                });

                // 响应窗口大小变化
                window.addEventListener('resize', function() {
                    creditTrendChart.resize();
                    creditCompositionChart.resize();
                });
            }

            // 使用requestIdleCallback在空闲时初始化图表
            if ('requestIdleCallback' in window) {
                window.requestIdleCallback(initCharts);
            } else {
                setTimeout(initCharts, 500);
            }

            // 添加标记处理按钮事件
            const markProcessedBtn = document.createElement('button');
            markProcessedBtn.className = 'btn btn-primary ml-2';
            markProcessedBtn.innerHTML = '<i class="fas fa-check-circle mr-2" aria-hidden="true"></i>标记处理';
            markProcessedBtn.addEventListener('click', markAsProcessed);
            document.getElementById('sendNotificationBtn').parentNode.appendChild(markProcessedBtn);
        });
    </script>
</body>
